<template>
    <div>
        <van-nav-bar title="门诊导诊单" left-text="" left-arrow @click-left="onClickLeft" />
        <div style="
        padding: 0px 16px;
        height:620px;
        background-color: #f5f5f5;
        overflow-y: auto;
        ">
            <div style="
        width:100%;
        height: 45px;
        background-color: white;
        margin-top: 15px;
        border-radius: 7px;
        line-height: 50px;
        display: flex;
        ">
                <div>
                    <span style="margin-left: 20px;">{{ ii.name }}</span>
                    <span style="margin-left: 20px;">{{ ii.ma }}</span>
                </div>
                <div style="
                display: flex;
                " @click="g4">
                    <img style="
                    width: 20px;
                    height: 20px;
                    margin-left: 115px;
                    margin-top: 15px;
                    " src="https://cdn7.axureshop.com/demo/2208121/images/%E9%97%A8%E8%AF%8A%E7%BC%B4%E8%B4%B9/u1116.svg"
                        alt="">
                    <p style="
                        margin-left: 2px;
                    ">切换</p>
                </div>
            </div>

            <div style="
                          width:88%;
                          height: 160px;
                          background-color: white;
                          margin-top: 15px;
                          border-radius: 7px;
                          line-height: 50px;
                          display: flex;
                          padding: 20px;
                          ">
                <div>
                    <div style="
                             display: flex;
                             ">
                        <div>
                            <img style="
                                                width:45px;
                                                height: 45px;
                                                "
                                src="https://cdn7.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E5%88%97%E8%A1%A8/u809.png"
                                alt="">
                        </div>
                        <div style="
                                        margin-top: -10px;
                                        margin-left: 18px;
                                        ">
                            <p style="
                                             font-weight: 700;
                                             font-size: 18px;
                                             color:#000000;
                                             font-style: normal;
                                             ">刘医生<span style="
                                             font-weight: 400;
                                             font-size: 13px;
                                             color:#1F1F1F;
                                             margin-left: 10px;
                                             ">主任医师</span></p>
                            <p style="
                                              font-weight: 400;
                                             font-size: 14px;
                                             color:#AAAAAA;
                                             margin-top: -27px;
                                             ">门诊外一科 <span style="margin-left: 10px;">四川省保健院南苑</span></p>
                        </div>
                    </div>
                    <div>
                        <p style="
                     font-weight: 400;
                     font-size: 14px;
                     margin-top: -10px;
                     ">登记号：20200101001598Z</p>
                        <p style="
                     font-weight: 400;
                     font-size: 14px;
                     margin-top: -25px;
                     ">预约时间：2020-01-27 08:30-12:00（上午）</p>
                        <hr color="#f3f3f3" width="125%" size="1" style="margin-left: -20px;" />
                        <div style="
                          font-weight: 400;
                          color:#1677FF;
                          font-size: 14px;
                         text-align: center;
                          "
                          @click="brth4r4325y"
                          >
                            查看导诊详情 >
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>




    <van-popup v-model:show="showBottom" round position="bottom" :style="{ height: '50%' }">
        <div style="
        margin-top: 10px;
                    ">
            <h3 style="
        text-align: center;
        ">选择就诊人</h3>
            <p style="
            margin-top: -22px;
            margin-left: 340px;
            font-size: 20px;
          " @click="showBottom = false">x</p>
            <div style="
        width:90%;
        height: 45px;
        background-color: #e6f4ff;
        margin-top: 15px;
        border-radius: 7px;
        line-height: 50px;
        display: flex;
        margin-left: 20px;
        " v-for="(i, index) in renmen" :key="index" @click="dian(i)">
                <span style="margin-left: 20px;">{{ i.name }}</span>
                <span style="margin-left: 20px;">{{ i.ma }}</span>
            </div>



        </div>

    </van-popup>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ref } from 'vue'
const router = useRouter()
const onClickLeft = () => {
    router.back()
}
const brth4r4325y = () => {
    router.push('/paymentOrder')
}
const ii = ref({
    name: "王小轲",
    ma: "2015*****10"
})
const renmen = ref([
    {
        name: "王小轲",
        ma: "2015*****10"
    },
    {
        name: "李玲玲",
        ma: "2015*****11"
    },
])
const g4 = () => {
    showBottom.value = true
}
const showBottom = ref(false)
const dian = (i: any) => {
    ii.value = i
    showBottom.value = false

}


</script>

<style scoped></style>